<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <script src="../../js/vue.min.js"></script>
	</head>

		
		 
       <div id="app">
       	<ul>
       		<li v-for="(item,index) in objList">
       			{{index}}
       		    {{item.name}}---{{item.price}}---{{item.color}}
       		<>
			<li v-for="(item,index) in list">
				{{index}}
			    {{item.name}}{{item.price}}
			<>
       	</ul>
       </div>
        
       <!-- ---------------------x.vue写法--------------------- -->
        
       <template>
           <div>
       		<!-- 数组的循环渲染 -->
       		<p v-for="(item,index) in list">{{index}}:{{item.name}} - {{item.price}}</p>
       	</div>
       </template>
       <script>
       	new Vue({
			el:'#app',
       		data() {
       			return {
       				hello: 'world',
       				num: 1,
       				status: true,
       				list: [{
       						name: 'apple',
       						price: 34
       					},
       					{
       						name: 'banana',
       						price: 56
       					},
       				],
       				objList: [{
       					name: 'apple',
       					price: 34,
       					color: 'red',
       					weight: 14
       				},
					]
       			}
       		}
       	})
       </script>